import React, {Component} from 'react'
export default class Life extends React.Component {
  constructor() {
    super()
    this.state = {
      age: 18
    }
  }
  chageAge() {
    this.setState({
      age: 20
    })
  }
  componentWillMount() {
    console.log('1.初始化阶段---组件即将被安装');
  }

  render(props) {
    console.log('2？redner函数说：我更新了');
    return (<div>
      <h1>生命周期示例</h1>
      <p>父组件传过来的值：{this.props.msg}</p>
      <p>年龄：{this.state.age}</p>
      <button onClick={()=>this.chageAge()}>子组件-修改年龄</button>
    </div>)
  }
  componentDidMount() {
    console.log('3.初始化阶段---组件已经被安装');
  }
  // 父组件要传一个新的props过来，才会触发
  // 通过外因（父组件）修改子组件
  componentWillReceiveProps(nextProps) {
    console.log('4.更新阶段---收到新的props',nextProps);
  }
  // 判断子组件是否需要更新——是否调用rendre函数
  shouldComponentUpdate(newProps, newState) {
    console.log('5.更新阶段--是否更新:',newProps, newState);
    // 钩子函数的名字是：组件是否应该更新，所以返回值是布尔值
    return true
  }
  componentWillUpdate() {
    console.log('6.更新阶段--即将更新:');
  }
  componentDidUpdate() {
    console.log('7.更新阶段--已经更新:');
  }
  componentWillUnmount() {
    console.log('8.销毁阶段--即将销毁:');
  }
}